<template>
  <el-tabs v-model="activeTab" tab-position="top" class="scenic-tabs">
    <el-tab-pane
      v-for="(continent, index) in continentList"
      :key="index"
      :label="continent.continent"
      :name="continent.continent"
    >
      <div class="card-grid">
        <div class="country-card" v-for="country in continent.countries" :key="country.name">
          <h3 class="country-title">{{ country.name }}</h3>
          <div class="city-container">
            <div v-for="city in country.cities" :key="city.name" class="city-block">
              <p class="city-name">
                <router-link
                  class="nav-item"
                  :to="{
                    name: 'showCity',
                    params: {
                      city: city.name,
                    },
                  }"
                >

                  {{ city.name }}
                </router-link>
              </p>
              <div class="spot-tags">
                <el-tag
                  v-for="spot in city.spots"
                  :key="spot"
                  class="spot-tag"
                  type="info"
                  effect="plain"
                >
                  <router-link
                    class="nav-item"
                    :to="{
                      path: '/show-scenic',
                      name: 'showScenic',
                      params: {
                        scenicId: 1,
                      },
                    }"
                  >
                    {{ spot }}
                  </router-link>
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { scenicData } from '@/utils/commonMessage/travels.ts'

const continentList = scenicData.filter((item: any) => item.continent !== 'China-Details')
const activeTab = ref(continentList[0].continent)
</script>

<style scoped>
.scenic-tabs {
  padding: 20px;
}

.nav-item{
  text-decoration: none;
  color: black;
}

.nav-item:hover{
  cursor: pointer;
  color: #00c4ff;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
}

.country-card {
  width: calc(33.333% - 16px); /* 每行三个卡片 */
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  box-sizing: border-box;
  transition: all 0.3s;
}

.card-grid::after {
  content: '';
  flex: 1 0 30%;
  max-width: calc(33.333% - 16px);
  visibility: hidden;
}

.country-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.country-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  border-left: 3px solid #409eff;
  padding-left: 8px;
}

.city-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.city-block {
  width: 100%;
}

.city-name {
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 4px;
  color: #666;
}

.spot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spot-tag {
  font-size: 13px;
  background-color: #f4f4f5;
  border-color: #dcdfe6;
}
</style>
